<template>
  <div>
    <van-nav-bar left-arrow title="我的订单" @click-left="MixinRouterBack"/>
    <!--商品信息-->
    <div class="assemble-container">
      <!--商品信息-->
      <div class="assemble-goods">
        <nuxt-link :to="`/goods/${assemble.goods_id}?sku_id=${assemble.sku_id}&from_nav=assemble`">
          <img :src="assemble.thumbnail" alt="">
        </nuxt-link>
        <div>
          <nuxt-link :to="`/goods/${assemble.goods_id}?sku_id=${assemble.sku_id}&from_nav=assemble`">
            <p>{{ assemble.goods_name }}</p>
          </nuxt-link>
          <p>
            <span>{{ assemble.required_num }}人团 &sdot; 已有{{ assemble.offered_num }}人参团</span>
            <span>
             <em class="assemble-goods-price">¥{{ assemble.origin_price | unitPrice  }}</em>
             <em class="assemble-goods-reduce-price">拼团省¥{{ savePrice | unitPrice }}</em>
           </span>
          </p>
        </div>
      </div>
      <!--邀请好友参团-->
      <div class="pt_share">
         <img :src="pintuan_bg" class="pt_bg"/>
         <div class="assemble-invitations" >
          <p v-if="isPay || isFormed">
            <span v-if="assemble.required_num > assemble.offered_num ">
              仅剩<em>{{ assemble.required_num - assemble.offered_num }}</em>个名额
            </span>
            <span v-else> 已成团 </span>
          </p>
        <!--参团人数-->
        <ul v-if="isPay || isFormed">
          <li v-for="(user, index) in assemble.participants" :key="index">
            <img v-if="user.face && user.face !== 'null'" :src="user.face" alt="">
            <img v-else src="../../../assets/images/icon-noface.jpg" alt="">
            <span v-if="user.is_master === 1">团长</span>
          </li>
        </ul>
        <!--倒计时-->
        <div v-if="assemble.left_time" class="assemble-invitations-countdown">
          剩余
          <span v-if="day">{{ day }}</span><i v-if="day">天</i><span>{{ hours }}</span>时<span>{{ minutes }}</span>分<span>{{ seconds }}</span>秒
          结束
        </div>
        <!--invite friends-->
        <div class="invite-friends">
          <!--未成团 - 待支付-->
          <nuxt-link :to="'/checkout/cashier?order_sn=' + this.$route.query.order_sn"  v-if="assemble.left_time && !isPay && !isShared && isFinshed">
          <button>去支付</button>
          </nuxt-link>
	        <!--未成团 - 被分享-->
          <button v-if="assemble.left_time && isShared && isFinshed && !isPay" @click="showSpecsPopup = true">我也要参团</button>
          <!--未成团 - 未被分享-->
	        <button v-if="assemble.left_time && !isShared && isFinshed && isPay" @click="handleInviteFriends">邀请好友</button>
          <!--已成团 - 被分享 -->
	        <button v-if="assemble.left_time && !isFinshed && isShared" @click="showSpecsPopup = true">一键发起拼团</button>
	        <!--已成团 - 未被分享 -->
	        <nuxt-link to="/">
		        <button v-if="assemble.left_time && !isFinshed && !isShared">去逛逛</button>
	        </nuxt-link>
	        <!--拼团活动已结束-->
	        <nuxt-link to="/">
		        <button v-if="!assemble.left_time">去逛逛</button>
	        </nuxt-link>
        </div>
      </div>
      </div>
      
      <!--您可能喜欢 -- 二级功能 -->
      <div v-if="!isShared && maybelikegoods.length" class="maybe-like-goods">
        <p>您可能喜欢</p>
        <ul>
          <li v-for="(goods, index) in maybelikegoods" :key="index">
            <nuxt-link :to="`/goods/${goods.goods_id}?sku_id=${goods.sku_id}&from_nav=assemble`">
              <img :src="goods.thumbnail" alt="">
            </nuxt-link>
            <nuxt-link :to="`/goods/${goods.goods_id}?sku_id=${goods.sku_id}&from_nav=assemble`">
              <p class="goods_name">{{ goods.goods_name }}</p>
            </nuxt-link>
            <p>¥
              <span>
                {{ goods.origin_price | unitPrice }}
              </span>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <goods-specs
      :goods-id="goods_id"
      :pintuan-id="pintuan_id"
      :show="showSpecsPopup"
      @sku-changed="(sku) => { selectedSku = sku }"
      @num-changed="(num) => { buyNum = num }"
      @close="showSpecsPopup = false"
      @to-assemble-buy-now="toAssembleBuyNow"
    />
    <!--手动分享弹框-->
    <van-popup v-model="showAssShare" position="bottom" style="height:35%">
      <van-nav-bar title="分享给小伙伴" @click-right="showAssShare = false">
        <i class="iconfont ea-icon-close" slot="right"/>
      </van-nav-bar>
      <ul class="share-ass">
        <li @click="handleShare(share)" v-for="(share, index) in shareList" :key="index">
          <img :src="share.icon" class="share-icon" alt="">
          <span>{{ share.text }}</span>
        </li>
      </ul>
    </van-popup>
    <!--微信遮罩-->
    <div v-show="showWxAssShare" class="weixin-mask">
      <img src="../../../assets/images/background-zhezhao.png" alt="">
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import * as API_Order from '@/api/order'
  import * as API_Trade from '@/api/trade'
  import * as API_Share from '@/api/share'
  import Storage from '@/utils/storage'
  import { Foundation } from '@/ui-utils'
  import GoodsSpecs from './goods-specs'
  export default {
    name: 'my-order-assemble',
    head() {
      return {
        title: `拼团 -${this.site.title}`
      }
    },
    data() {
      return {
        // uuid
        uuid: Storage.getItem('uuid'),

        /** 拼团详情 */
        assemble: {},

        /** 拼团人 */
        assemblePeople: [],

        /** 您可能喜欢*/
        maybelikegoods: [],

        /** 倒计时计时器 */
        timer: null,

        /** 天数 */
        day: 0,

        /** 时 */
        hours: 0,

        /** 分 */
        minutes: 0,

        /** 秒 */
        seconds: 0,

	      /** 分享列表 */
	      shareList: [
		      { type: 'qqFriend', text: 'QQ', icon: require('../../../assets/images/icon-qq.jpg') },
		      { type: 'weibo', text: '微博', icon: require('../../../assets/images/icon-weibocai.png') },
		      { type: 'wechatFriend', text: '微信', icon: require('../../../assets/images/icon-weixin.jpg') },
		      { type: 'wechatTimeline', text: '朋友圈', icon: require('../../../assets/images/icon-friend.png') },
		      { type: 'qZone', text: 'QQ空间', icon: require('../../../assets/images/icon-Qzone.png') }
	      ],

        /** 是否显示分享弹框 */
        showAssShare: false,

        /** 是否显示分享遮罩 */
        showWxAssShare: false,

        /** 是否是被分享的 */
        isShared: false,

	      /** 分享授权链接 */
        signatureUrl: '',

	      /** 分享参数 */
	      shareParams: {},

        /** 拼团规格弹框**/
        showSpecsPopup: false,

        /** 商品id */
        goods_id: this.$route.query.goods_id,

	      /** 拼团id */
	      pintuan_id: '',

        /** 购买数量 */
        buyNum: 1,

        /** 已选sku */
        selectedSku: '',

        //分享背景
        pintuan_bg: require("../../../assets/images/background-pt-share_01.png"),

        //是否支付
        isPay: false,

        //是否成团
        isFormed: false,

      }
    },
    async mounted() {
      // 获取刷新次数
	    if(!this.MixinIsAndroidBrowser() && Storage.getItem('refresh_token')) {
        const _not_first_invite = sessionStorage.getItem('not_first_invite')
        if (!_not_first_invite) {
          sessionStorage.setItem('not_first_invite', '1')
          window.location.reload()
        }
	    }
      //  检测是否是被分享的
      this.isShared = !!(this.$route.query.from_nav && this.$route.query.from_nav === 'assemble')
      // 获取拼团订单详情 // 猜你喜欢
      const responses = await Promise.all([
        API_Order.getAssembleOrderDetail(this.$route.query.order_sn),
        API_Order.getAssembleGuest(this.$route.query.order_sn),
      ])
      this.assemble = responses[0]
      this.assemble.left_time && this.contShareDown(this.assemble.left_time)
	    const { pintuan_id } = this.assemble
      this.pintuan_id = pintuan_id
      this.isPay = this.$route.query.pay_status === 'PAY_YES'
      this.isFormed = this.assemble.order_status === 'formed'
      this.pintuan_bg = this.isPay ? require("../../../assets/images/background-pt-share_02.png") : this.pintuan_bg
      this.pintuan_bg = this.isFormed ? require("../../../assets/images/background-pt-share_03.png") : this.pintuan_bg
      // 猜你喜欢
      this.maybelikegoods = responses[1]
      // 分享链接
	    let _this = this
	    function shareLink() {
		    return `${_this.MixinDomain.buyer_wap}/member/my-order/assemble?order_sn=${_this.$route.query.order_sn}&goods_id=${_this.assemble.goods_id}&sku_id=${_this.assemble.sku_id}&from_nav=assemble`
      }
	    this.shareParams = {
	      title: this.assemble.goods_name,
	      desc: this.assemble.goods_name,
	      link: shareLink(),
	      imgUrl: this.assemble.thumbnail
      }
      // 动态获取签名url
	    function url() {
        return location.href.split('#')[0]
      }
      const signatureUrl = this.MixinIsAndroidBrowser() ? location.href.split('#')[0] : url()
	    this.signatureUrl = signatureUrl
      //  判断是否是微信浏览器 如果是微信浏览器且不是被分享的则去右上角进行分享 如果不是则进行手动分享
      if (this.MixinIsWeChatBrowser() && !this.isShared) {
	      const shareOK = () => {
          this.$message.success('分享成功')
          this.showWxAssShare = false
	      }
	      const shareFail = () => {
          this.$message.success('分享失败')
          this.showWxAssShare = false
        }
        API_Share.wxShare({ url: signatureUrl, type: 'WAP' }, this.shareParams, shareOK, shareFail)
      }
    },
    computed: {
      savePrice() {
        return parseFloat(this.assemble.origin_price) - parseFloat(this.assemble.sales_price)
      },
	    // 是否已完成拼团
	    isFinshed() {
        return  this.assemble.required_num - this.assemble.offered_num
	    }
    },
    components: {
      [GoodsSpecs.name]: GoodsSpecs
    },
    methods: {
      /** 邀请好友 */
      handleInviteFriends() {
	      this.showAssShare = !this.MixinIsWeChatBrowser()
	      this.showWxAssShare = !!this.MixinIsWeChatBrowser()
      },

      /** 参与分享来的拼团 或者一键发起拼团 */
      toAssembleBuyNow() {
        if (!this.isLogin()) return
        const { buyNum } = this
        const { sku_id } = this.selectedSku
        API_Trade.addToAssembleCart(sku_id, buyNum).then(_ => {
          this.$store.dispatch('cart/getAssembleCartAction')
          const link = this.isFinshed ? `/checkout?order_id=${this.assemble.order_id}&from_nav=assemble` : `/checkout?from_nav=assemble`
          this.$router.push(link)
        })
      },

      /** 是否已登录 */
      isLogin() {
        if (!this.selectedSku) {
          this.$message.error('请选择商品规格！')
          this.showSpecsPopup = true
          return false
        }
        if (!Storage.getItem('refresh_token')) {
          this.$confirm('您还未登录，要现在去登录吗？', () => {
	          let _forward = `${this.$route.path}?order_sn=${this.$route.query.order_sn}&goods_id=${this.$route.query.goods_id}&sku_id=${this.selectedSku.sku_id}`
            if(this.$route.query.from_nav === 'assemble') {
              _forward += `&from_nav=assemble`
            }
	          this.$router.push({ path: '/login', query: { forward: _forward } })
          })
          return false
        } else {
          return true
        }
      },

      /** 开启倒计时 */
      contShareDown(times) {
        let end_ime = times
        this.timer = setInterval(() => {
          if (end_ime <= 0) {
            clearInterval(this.timer)
          } else {
            const time = Foundation.countTimeDown(end_ime)
            this.day = parseInt(time.day)
            this.hours = time.hours
            this.minutes = time.minutes
            this.seconds = time.seconds
            end_ime--
          }
        }, 1000)
      },

	    handleShare(share) {
      	const { type } = share
		    this.$nativeShare.setShareData({ ...this.shareParams, icon: this.assemble.thumbnail })
		    try {
			    this.$nativeShare.call(type)
		    } catch (e) {
			    // 在这里做降级处理
			    this.$message.error('当前浏览器不支持分享功能')
		    }
	    }
    },
    destroyed() {
      clearInterval(this.timer)
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  @import "../../../assets/styles/color";
  .assemble-container {
    padding-top: 45px;
    padding-bottom: 10px;
    background-color: #f1f1f1;
	  min-height: 100vh;
    /*拼团商品信息*/
    .assemble-goods {
      padding: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      background-color: #fff;
      img {
        width: 100px;
        margin-right: 10px;
      }
      & > div {
        height: 100px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        p:first-child {
          color: #333;
          font-size: 15px;
        }
        p:last-child {
          & > span {
            display: block;
          }
          em {
            display: inline-block;
          }
          span {
            em.assemble-goods-price {
              color: #f24;
              font-size: 16px;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .pt_bg{
      width: 100%;
    }
    /*邀请好友*/
    .pt_share {
      position: relative;
      width: 100%;
      margin: 15px 0;
      min-height: 400px;
      background-color: #fff;
      p {
        text-align: center;
        padding-top: 30px;
        span {
          display: inline-block;
          background-color: #f7297c;
          color: #fff;
          padding: 4px 8px;
          border-radius: 20px;
        }
      }
      ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        li {
          position: relative;
          padding: 0 15px;
          img {
	          width: 65px;
	          height: 65px;
	          border-radius: 50%;
	          object-fit: contain;
          }
          span {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 10;
            display: inline-block;
            padding: 0 6px;
            font-size: 8px;
            border-radius: 17px;
            border: 2px solid #fff;
            background-color: #FCC52D;
          }
        }
      }
      .assemble-invitations {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 240px;
        .assemble-invitations-countdown {
          text-align: center;
          margin-top: 20px;
          line-height: 30px;
          span {
            text-align: center;
            background-color: #333;
            padding: 2px;
            border-radius: 3px;
            color: #fff;
            font-size: 15px;
          }
        }
      }
      /*邀请好友*/
      .invite-friends {
        position: absolute;
        bottom: 20px;
        width: 90%;
        margin: 0 auto;
        padding:5px 20px;
        button {
          width: 100%;
          line-height:45px;
          border-radius: 5px;
          font-size: 15px;
          color: #fff;
          background-color: #f7297c;
        }
      }
    }
    /** 您可能喜欢 */
    .maybe-like-goods {
      background-color: #fff;
      & > p {
        padding: 10px 15px;
        font-size: 15px;
      }
      & > ul {
        & > li {
          list-style: none;
          width: 30%;
          padding: 0 6px;
          display: inline-block;
	        cursor: pointer;
          img {
            width: 100%;
	          height: 100px;
            border-radius: 1px;
          }
          p.goods_name {
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
	          min-height: 36px;
          }
          p:last-child > span {
            color: #333;
            font-size: 16px;
          }
        }
      }
    }
  }
  /** 弹框分享 */
  /deep/ ul.share-ass {
    width: 100%;
    height: calc(100% - 46px) ;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: center;
    background-color: #f1f1f1;
    padding-top: 46px;
    li {
      list-style: none;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      width: 25%;
      img.share-icon {
        width: 50px;
        height: 50px;
        background-color: #fff;
        border-radius: 50%;
        border: none;
      }
      span {
        display: inline-block;
        margin-top: 5px;
        text-align: center;
      }
    }
  }

  /** 分享遮罩 */
  .weixin-mask {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    overflow: hidden;
    background-color: rgba(158, 158, 158,.7);
    background-size: 100% 100%;
    img {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 100;
      width: 100%;
    }
  }
</style>
